<template>
    <div class="cmsContentDialog" v-if="cmsContentDialogVisible">
        <el-dialog :close-on-click-modal="isModelClose" :style="dialogStyle" :before-close="close" title="更新内容管理" v-if="cmsContentDialogVisible" :visible.sync="cmsContentDialogVisible">
            <el-form ref="cmsCantentForm" :model="form" :rules="rules">
                <el-form-item label="内容名称" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="内容分类" :label-width="formLabelWidth" prop="categoryId">
                    <el-select v-model="form.categoryId" placeholder="请选择">
                        <el-option v-for="item in filterItems" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="内容超链接地址" :label-width="formLabelWidth" prop="url">
                    <el-input v-model="form.url" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" :label-width="formLabelWidth" prop="status">
                    <el-radio v-model="form.status" label="true">是</el-radio>
                    <el-radio v-model="form.status" label="false">否</el-radio>
                </el-form-item>
                <el-form-item label="排序号" :label-width="formLabelWidth" prop="sortOrder">
                    <el-input v-model="form.sortOrder" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="内容图片" style="margin-left: 72px; margin-bottom: 0px">
                    <el-upload class="avatar-uploader" action="/mshop/api/gataway/item/admin/file/upload" :data="paramData" :show-file-list="true" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="form.pic" :src="form.pic" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="submitForm('cmsCantentForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
    import { Component, Emit, Prop, Vue } from "vue-property-decorator";
    import AdminApiActions from "@/components/api/admin-api-actions";
    import $ from "jquery";
    @Component
    export default class BrandDialog extends Vue {
        @Prop() params: any;
        public paramData: any = {};
        public cmsContentDialogVisible: boolean = true;
        public dialogStyle: any = {};
        public isModelClose: boolean = false;
        public imageUrl: any = "";
        public categoryId: any = "";
        public imageList: Array < any > = new Array < any > ();
        public form: any = {};
        public filterItems: Array < any > = new Array < any > ();
        //表单校验
        public rules: any = {
            title: [{ required: true, message: "请输入标题", trigger: "blur" }],
            categoryId: [{ required: true, message: "请选择分类", trigger: "blur" }],
            url: [{ required: true, message: "请填写url", trigger: "blur" }],
            status: [{ required: true, message: "请选者启用状态", trigger: "blur" }],
            sortOrder: [{ required: true, message: "请填写排序号", trigger: "blur" }],
        };
        public handleAvatarSuccess(data) {
            this.imageList.push(data.url);
            this.form.pic = ";" + this.imageList.join(";");
        }
        public beforeAvatarUpload() {}
        public formLabelWidth: any = "140px";
        //创建时调用
        async created() {
            this.form = this.params.form;
            this.filterItems = this.params.filterItems.map((item) => {
                return {
                    value: item.value,
                    label: item.text,
                };
            });
            this.cmsContentDialogVisible = true;
            this.$nextTick(() => {
                this.centerDialog();
            });
        }

        @Emit("close")
        public close() {
            this.cmsContentDialogVisible = false;
        }

        @Emit("confirm")
        public confirm() {
            this.cmsContentDialogVisible = false;
        }
        //提交表单
        public submitForm(formName) {
            (this.$refs[formName] as any).validate((valid) => {
                if (valid) {
                    if (this.params.type == "add") {
                        this.addCmsContent();
                    } else {
                        this.updateCmsContent();
                    }
                } else {
                    return false;
                }
            });
            this.close();
        }
        //保存分组
        public async addCmsContent() {
            let apiActions = new AdminApiActions(this);
            await apiActions.addCmsContent(this.form);
            this.confirm();
        }
        //编辑分组
        public async updateCmsContent() {
            let apiActions = new AdminApiActions(this);
            await apiActions.updateCmsContent(this.form);
            this.confirm();
        }
        public centerDialog() {
            this.$nextTick(() => {
                let dialogHeight = $(".cmsContentDialog .el-dialog").height();
                let windowHeight = $(window).height();
                let ss = (windowHeight - dialogHeight) / 2;
                this.dialogStyle = {
                    top: ss + "px",
                };
            });
        }
    }
</script>
<style lang="less">
    .cmsContentDialog {
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409eff;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        position: absolute;
        width: 100%;
        height: 100%;

        .el-dialog__body {
            padding-bottom: 0px;
            height: 340px;
            overflow: auto;
        }

        .el-dialog {
            width: 50% !important;
            height: 500px;
            margin-top: 0px !important;

            .dialog-footer {
                display: flex;
                justify-content: center;
            }
        }
    }
</style>